<template>
  <div class="cmenu">
    <el-collapse v-model="activeNames" class="menu-list">
      <el-collapse-item v-for="(item, index) in cMenuList" :key="index" :name="index">
        <template slot="title">
          <div class="collapse-title">
            <h5><span>{{item.title}}</span></h5>
          </div>
        </template>
        <ul class="collapse-content">
          <el-checkbox-group v-model="item.active_content" @change="handleChangeCItem(item)">
            <li v-for="(citem, index2) in item.show_content" :key="index2" :class="{active: citem.active===true}">
              <el-checkbox :label="citem.key">
                <span class="tit" :title="citem.key">{{citem.key_string || citem.key}}</span>
                <span class="cont">{{citem.doc_count}}</span>
              </el-checkbox>
            </li>
          </el-checkbox-group>
        </ul>
        <div v-if="item.isMore" class="tools-box">
          <i class="show-more" :class="{'el-icon-minus': item.showMore,'el-icon-plus': !item.showMore}" @click="showMore(item)"></i>
        </div>
      </el-collapse-item>
    </el-collapse>
    <!-- no-data -->
    <div v-if="cMenuList.length<=0" class="no-data">
      <loading2 :emptyText="emptyText"/>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {talentData} from './CItemData.js'
import {ds_dictionary} from '@/utils/utils'
export default {
  props: {
    curType: {
      type: String
    }
  },
  data() {
    return {
      cMenuList: [],
      activeNames: [],
      moreNumber: 4,
      // filterParams: {}, // 参数
      emptyText: 'loading',
    }
  },
  computed: {
    ...mapState(['facetParams'])
  },
  methods: {
    init(fdata) {
      let type = this.$route.query.type
      let data = []
      let activeNames = []
      if (type == 1) { // 专利
        data = this.getFacetData('专利', fdata)
      } else if (type == 2) { // 文献
        data = this.getFacetData('文献', fdata)
      } else if (type == 3) { // 成果
        data = this.getFacetData('成果', fdata)
      } else if (type == 4) { // 标准
        data = this.getFacetData('标准', fdata)
      } else if (type == 5) { // 企业
        data = this.getFacetData('企业', fdata)
      } else if (type == 6) { // 人才
        data = this.getFacetDataTalent('人才', fdata)
        // data = talentData
      } else if (type == 7) { // 政策
        data = this.getFacetData('政策', fdata)
      } else if (type == 8) { // 资讯
        data = this.getFacetData('资讯', fdata)
      }

      if (data.length > 0) {
        data.forEach((v, i) => {
          this.$set(v, 'isMore', v.content.length > this.moreNumber)
          this.$set(v, 'show_content', v.content.slice(0, this.moreNumber))
          activeNames.push(i)
        })
      } else {
        this.emptyText = '暂无内容'
      }

      this.cMenuList = data
      this.activeNames = activeNames
    },
    // 聚合函数
    getFacetData(type, fdata) {
      // 推广形式 promotion_way
      // 应用状态 application_status
      // 成果类别 achievement_type
      // 成果所处阶段 achievement_stage
      // 所属高新技术领域 achievement_field
      // 成果登记时间 registered_date

      // 年份数据去掉空值
      if (fdata['issue_date']) fdata['issue_date'] = this.reDate(fdata['issue_date'])
      if (fdata['registered_date']) fdata['registered_date'] = this.reDate(fdata['registered_date'])
      if (fdata['pubdate']) fdata['pubdate'] = this.reDate(fdata['pubdate'])
      if (fdata['article_year']) fdata['article_year'] = this.reDate(fdata['article_year'])
      if (fdata['start_date']) fdata['start_date'] = this.reDate(fdata['start_date'])
      if (fdata['apd']) fdata['apd'] = this.reDate(fdata['apd'])
      
      // 去掉空值
      if (fdata['keywords']) fdata['keywords'] = this.removeNull(fdata['keywords'])
      if (fdata['source']) fdata['source'] = this.removeNull(fdata['source'])
      
      let keys = Object.keys(fdata) || []
      let facetParams = {}
      let data = []
      keys.forEach(v => {
        let active_content = []
        facetParams[v] = this.facetParams[v] || ''
        if (fdata[v] && fdata[v].length > 0) {
          fdata[v].forEach(b => {
            if (facetParams[v] !== '') {
              b.active = facetParams[v].split(',').findIndex(n => n === b.key) > -1
              if (b.active) {
                active_content.push(b.key)
              }
            } else {
              b.active = false
            }
          })
          data.push({
            title: ds_dictionary[type][v],
            title_en: v,
            content: fdata[v],
            active_content,
            toggle: false
          })
        }
      })

      this.$store.commit('setFacetParams', facetParams)
      return JSON.parse(JSON.stringify(data))
    },
    // 聚合函数-人才
    getFacetDataTalent(type, fdata) {
      let keys = Object.keys(fdata) || []
      let facetParams = {}
      let data = []
      keys.forEach(v => {
        if (v !== 'patentCount') {
          let active_content = []
          facetParams[v] = this.facetParams[v] || ''
          if (fdata[v] && fdata[v].length > 0) {
            fdata[v].forEach(b => {
              if (facetParams[v] !== '') {
                b.active = facetParams[v].split(',').findIndex(n => n === b.key) > -1
                if (b.active) {
                  active_content.push(b.key)
                }
              } else {
                b.active = false
              }
            })
            data.push({
              title: ds_dictionary[type][v],
              title_en: v,
              content: fdata[v],
              active_content,
              toggle: false
            })
          }
        }
      })
      // 对专利数量进行特殊处理
      let patentCountData = []
      let patentCount_active_content = []
      if (fdata['patentCount']) {
        facetParams['patentCount'] = {}
        let dictionary = {
          'listTwoHundred': '200个以上',
          'listOneHundred': '100-200个',
          'listFifty': '50-100个',
          'listTwenty': '20-50个',
          'listTen': '10-20个',
          'listOne': '10个以下',
        }
        let patentCount = fdata['patentCount']
        let keys = Object.keys(dictionary)
        
        facetParams['patentCount'] = (this.facetParams && this.facetParams['patentCount']) || ''
        keys.forEach(v => {
          if (facetParams['patentCount'].indexOf(v) > -1) {
            patentCount_active_content.push(v)
          }
          if (patentCount[v] && patentCount[v] > 0) {
            patentCountData.push({
              key: v,
              key_string: dictionary[v],
              doc_count: patentCount[v],
              active: (facetParams['patentCount'].indexOf(v) > -1) ? true : false
            })
          }
        })
      }

      if (patentCountData.length > 0) {
        data.push({
          title: ds_dictionary[type]['patentCount'],
          title_en: 'patentCount',
          content: patentCountData,
          active_content: patentCount_active_content,
          toggle: false
        })
      }

      return JSON.parse(JSON.stringify(data))
    },
    // 年份数据去掉空值
    reDate(arr) {
      let date = []
      if (arr && arr.length > 0) {
        arr.forEach((v, i) => {
          if (v.doc_count > 0) {
            date.push({
              key: moment(v.key).format('YYYY'),
              doc_count: v.doc_count
            })
          }
        })
        date.sort((a, b) => {
          return b.key - a.key
        })
      }
      return date.filter((v, i) => i < 20)
    },
    // 去掉空值
    removeNull(arr) {
      return arr.filter(v => v.key !== '')
    },
    // 选择筛选项 
    handleChangeCItem(item) {
      item.show_content.forEach((v, i) => {
        this.$set(item.content[i], 'active', false)
        item.active_content.forEach((b, j) => {
          if (v.key === b) {
            this.$set(item.show_content[i], 'active', true)
          }
        })
      })
      item.content.forEach((v, i) => {
        this.$set(item.content[i], 'active', false)
        item.active_content.forEach((b, j) => {
          if (v.key === b) {
            this.$set(item.content[i], 'active', true)
          }
        })
      })

      let facetParams = JSON.parse(JSON.stringify(this.facetParams))
      facetParams[item['title_en']] = item.active_content && item.active_content.join(',')
      this.$store.commit('setFacetParams', facetParams)
      this.$Bus.$emit('facetParams', facetParams)
    },
    // 展示更多
    showMore(item) {
      this.$set(item, 'showMore', !item.showMore)
      if (item.showMore) {
        this.$set(item, 'show_content', item.content)
      } else {
        this.$set(item, 'show_content', item.content.slice(0, this.moreNumber))
      }
    }
  },
  watch: {
    '$route'() {
      let query = this.$route.query
      if (query) {
        // this.init()
      }
    },
  },
  mounted() {
    this.$store.commit('setFacetParams', {})
    let ths = this
    this.$Bus.$on('facetData', fdata => {
      this.cMenuList = []
      ths.init(fdata)
    })
  },
  beforeDestroy() {
    this.$Bus.$off('facetData')
  }
}
</script>

<style lang="scss" scoped>
.cmenu {
  position: relative;
  width: 2.25rem;
  padding: .19rem .15rem;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  box-sizing: border-box;
  background-color: $color2;
  &:after {
    position: absolute;
    top: .19rem;
    right: 0;
    width: 1px;
    height: calc(100% - .38rem);
    content: '';
    background-color: $color51;
  }
  .menu-list {
    position: relative;
    border: 0;
    ::v-deep {
      .el-collapse-item__header {
        border: 0;
        .el-collapse-item__arrow {
          // transform: rotate(90deg);
          transform: rotate(-90deg);
          &.is-active {
            transform: rotate(90deg);
          }
        }
      }
      .el-collapse-item__wrap {
        border: 0;
      }
    }
    .collapse-title {
      display: block;
      margin-bottom: .35rem;
      &:last-of-type {
        margin-bottom: 0;
      }
      h5 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: .48rem;
        // font-family: SourceHanSansCN-Medium;
        font-weight: normal;
        font-size: .16rem;
        color: $color71;
        i {
          color: $color72;
          cursor: pointer;
        }
      }
    }
    .collapse-content {
      position: relative;
      // border-left: 1px solid $color102;
      transition: all .4s ease;
      &:before {
        position: absolute;
        top: 4%;
        left: 0;
        width: 1px;
        height: calc(92%);
        content: '';
        background-color: $color102;
      }
      .el-checkbox-group {
        ::v-deep {
          .el-checkbox {
            width: 100%;
          }
          .el-checkbox__label {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            width: calc(100% - 24px);
          }
        }
      }
      li {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: .1rem;
        cursor: pointer;
        transition: all .1s ease-in-out;
        &:hover {
          background-color: $color46;
        }
        &.active {
          span {
            font-weight: bold;
            color: $mainColor !important;
          }
        }
        span {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &.tit {
            max-width: 55%;
            line-height: .34rem;
            font-size: .14rem;
            color: $color73;
          }
          &.cont {
            max-width: 45%;
            padding: 0 .07rem;
            border-radius: 40px;
            font-size: .13rem;
            color: $color74;
            background-color: $color75;
          }
        }

      }
    }
    .tools-box {
      position: relative;
      display: flex;
      .show-more {
        display: inline-block;
        width: .2rem;
        height: .2rem;
        line-height: .2rem;
        // font-family: SourceHanSansCN-Light;
        font-size: .16rem;
        color: $color76;
        cursor: pointer;
        &:hover {
          color: $mainColor;
        }
      }
    }
  }
}
</style>